<!-- 注册页面 -->
<template>
	<div class="register">
		<div class="refister-part">
			<div class="call-back-icon">
				<el-tooltip class="item" effect="light" content="返回主页" placement="top">
					<i class="el-icon-moon" @click="callBackhome"></i>
				</el-tooltip>
			</div>
			<div class="from-box">
				<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
					class="demo-ruleForm">
					<el-form-item prop="userName">
						<el-input type="text" placeholder="昵称(2~10位)" v-model="ruleForm.userName" maxlength="10"
							minlength="2" show-word-limit clearable></el-input>
					</el-form-item>
					<el-form-item prop="pass">
						<el-input type="password" placeholder="密码" v-model="ruleForm.pass" autocomplete="off" clearable>
						</el-input>
					</el-form-item>
					<el-form-item prop="checkPass">
						<el-input type="password" placeholder="确认密码" v-model="ruleForm.checkPass" autocomplete="off"
							clearable></el-input>
					</el-form-item>
					<el-form-item prop="phoneNumber">
						<el-input placeholder="手机号码" v-model.number="ruleForm.phoneNumber" clearable></el-input>
					</el-form-item>

					<el-form-item prop="code">
						<el-input placeholder="验证码" v-model.number="ruleForm.code" clearable></el-input>

						<el-button type="primary" class="get-code-butn" @click="getPhoneCode" :disabled="show">
							{{ buttonName }}
						</el-button>
					</el-form-item>
					<el-form-item>
						<el-button class="from-butn" type="primary" :disabled="isSubmit" @click="submitForm('ruleForm')">注册</el-button>
						<el-button class="from-butn" @click="resetForm('ruleForm')">重置</el-button>
					</el-form-item>
				</el-form>
			</div>




		</div>
	</div>

</template>

<script>
	import {
		devUserManagementUrl
	} from '@/api/apiconst'
	export default {
		name: "Register",
		data() {
			//校验用户名
			var validateUserName = (rule, value, callback) => {

				if (!value) {
					return callback(new Error('昵称不能为空'));
				
				} else if (value.length >= 2 && value.length <= 10) {
					this.isSubmit=false;
					callback();
				} else {

					return callback(new Error('昵称需要2~10个字符'));
				}

			};
			//校验手机号码
			var validatePhoneNumber = (rule, value, callback) => {
				// 手机号码验证
				const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
				this.show = true;
				if (!value) {
					return callback(new Error('手机号码不能为空'));
				} else if (value.length <= 10 || !reg.test(value)) {
					return callback(new Error('手机号码格式不正确'));
				} else {
					this.show = false;
					callback();
				}

			};
			//校验密码
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				} else {
					if (this.ruleForm.checkPass !== '') {
						this.$refs.ruleForm.validateField('checkPass');
					}
					callback();
				}
			};
			//校验确认密码
			var validatePass2 = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请再次输入密码'));
				} else if (value !== this.ruleForm.pass) {
					callback(new Error('两次输入密码不一致!'));
				} else {
					callback();
				}
			};
			//校验验证码
			var validateCode = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('验证码不能为空'));
				} else if (!Number.isInteger(value)) {
					callback(new Error('请输入数字值'));
				} else if (!(value >= 10000)) {

					callback(new Error('验证码格式错误'));

				} else {
					callback();
				}

			};
			return {
				isSubmit:true,
				show: true,
				count: "",
				timer: null,
				buttonName: "获取验证码",
				ruleForm: {
					userName: "",
					pass: '',
					checkPass: '',
					phoneNumber: '',
					code: ""
				},
				rules: {
					userName: [{
						validator: validateUserName,
						trigger: 'blur'
					}],
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}],
					checkPass: [{
						validator: validatePass2,
						trigger: 'blur'
					}],
					phoneNumber: [{
						validator: validatePhoneNumber,
						trigger: 'blur'

					}],
					code: [{
						validator: validateCode,
						trigger: 'blur'

					}]
				}
			}

		},
		methods: {
			//返回主页
			callBackhome() {
				//跳转到登录界面
				this.$router.push({
					path: "/home"
				});
			},
			//点击提交按钮的逻辑
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$axios({
							method: 'POST',
							url: '/user/register',
							baseURL: devUserManagementUrl,
							data: {
								nickName: this.ruleForm.userName,
								password: this.ruleForm.pass,
								phoneNumber: this.ruleForm.phoneNumber,
								code: this.ruleForm.code
							}
						}).then(
							response => {
								if (response.data.code == 200) {
									this.$message.success('注册成功，我们去登录吧~')

									setTimeout(() => {

										//跳转到登录界面
										this.$router.push({
											path: "/login"
										});

									}, 2000);

								} else if (response.data.code == 5001) {
									this.$message.error('请检查信息是否正确');
								} else if (response.data.code == 5002) {
									this.$message.error('验证码已失效');
								} else if (response.data.code == 5003) {
									this.isSubmit=true;
									this.$message.error('该用户昵称已存在');
									
								}
							},
							error => {
								this.$message.error('诶呀~服务器走丢了');
							}
						);




					} else {
						return false;
					}
				});
			},
			//清除按钮逻辑
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			//发送验证码
			getPhoneCode() {
				//倒计时效果
				let TIME_COUNT = 5 * 60;
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.buttonName = this.count + "s后获取"
					this.show = true;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
							this.buttonName = this.count + "s后获取"
							this.show = true;
						} else {
							this.show = false;
							clearInterval(this.timer);
							this.timer = null;
							this.buttonName = "重新获取验证码"
						}
					}, 1000)
				}
				//获取验证码
				this.$axios({
					method: 'GET',
					url: '/user/getCode/' + this.ruleForm.phoneNumber,
					baseURL: devUserManagementUrl,
				}).then(
					response => { //此处接收响应回来的数据
						console.log("登录数据", response)
						if (response.data.code == 200) {
							alert("您的验证码是："+response.data.data)
						
						}
					},
					error => {
						console.log("请求失败了，失败信息", error)
					}
				);

			}


		}
	}
</script>

<style scoped>
	.from-butn {
		margin-right: 13px;
	}

	.get-code-butn {
		position: absolute;
		right: -128px;
		top: 1px;
		width: 124px;
		font-size: 1px;
	}

	.el-icon-moon {
		color: white;
	}

	.from-box {
		width: 277px;
	}

	.register {
		background: url("@/assets/images/register-background-map.jpg");
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		left: 0;


	}

	.refister-part {
		height: auto;
		opacity: 1.5;
		padding: 0px;
		max-width: 410px;
		margin: 109px auto;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.refister-part .call-back-icon {
		text-align: center;
		font-size: 26px;
		padding-top: 17px;
		margin-bottom: 21px;
		height: 20px;
	}
</style>
